<template>
  <div>
    <!-- 商品热单 -->
    <div class="right">
      <div class="title">
        销售统计
        <span>2022.10.01 ~ 2022.10.29</span>
      </div>
      <div class="body">
        <el-row v-for="(item, index) in skuTopList" :key="index">
          <el-col
            :span="5"
          ><div class="top">{{ index + 1 }}</div></el-col>
          <el-col
            :span="13"
          ><div class="sku-name">{{ item.skuName }}</div></el-col>
          <el-col
            :span="6"
          ><div class="count">{{ item.count }} 单</div></el-col>
        </el-row>
      </div>
    </div>
    <div class="top">
      <!-- 工单统计 -->
      <div class="allcount">
        <div class="title">
          工单统计
          <span>2022.10.01 ~ 2022.10.29</span>
        </div>
        <div class="body">
          <div class="stats">
            <div class="num">{{ taskReport1.total+ taskReport2.total }}</div>
            <div class="text1">工单总数(个)</div>
          </div>
          <div class="stats">
            <div class="num">{{ taskReport1.completedTotal + taskReport2.completedTotal }}</div>
            <div class="text1">完成工单(个)</div>
          </div>
          <div class="stats">
            <div class="num">{{ 0 }}</div>
            <div class="text1">进行工单(个)</div>
          </div>
          <div class="stats">
            <div class="num">{{ taskReport1.cancelTotal + taskReport2.cancelTotal }}</div>
            <div class="text1">取消工单(个)</div>
          </div>
        </div>
      </div>
      <!-- 销售统计 -->
      <div class="sstj">
        <div class="title">
          销售统计
          <span>2022.10.01 ~ 2022.10.29</span>
        </div>
        <div class="body">
          <div class="stats">
            <div class="num">{{ orderCount }}</div>
            <div class="text1">订单量(个)</div>
          </div>
          <div class="stats">
            <div class="num">{{ orderAmount }}</div>
            <div class="text1">销售额(万元)</div>
          </div>
        </div>
      </div>
    </div>
    <div class="center">
      <div class="title">
        销售数据
        <span>2022.10.24 ~ 2022.10.29</span>
      </div>
      <!-- 销售数据 -->
      <div style="display: flex">
        <div class="xssj chart" />
        <!-- 销售额分布 -->
        <div class="xsefb chart" />
      </div>
    </div>
    <div class="foot">
      <!-- 合作商点位数 -->
      <div class="partner">
        <div>
          <div class="title">
            工单统计
            <span>2022.10.01 ~ 2022.10.29</span>
          </div>
          <div class="box" />
        </div>
        <div class="count">
          <p>{{ allCount }}</p>
          <p>点位数</p>
          <p>{{ allPartners }}</p>
          <p>合作商数</p>
        </div>
      </div>
      <!-- 异常设备监控 -->
      <div class="sbjk">
        <div class="title">
          异常设备监控
        </div>
        <div class="empty">
          <img src="http://likede2-admin.itheima.net/img/empty.87c4f71b.png" alt="">
          <div class="tips">暂无数据</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import dayjs from 'dayjs'
import { mapGetters } from 'vuex'
import {
  getNodeCollectAPI,
  getAllCountAPI,
  getAllPartnersAPI,
  getAmountCollectAPI,
  getRegionCollectAPI,
  getSkuTopAPI,
  getTaskReportInfoAPI,
  getOrderCountAPI,
  getOrderAmountAPI
} from '@/api'

export default {
  name: 'Dashboard',
  data() {
    return {
      allPartners: '', // 合作商
      allCount: '', // 点位数
      skuTopList: [], // 销量前十
      taskReport1: {},
      taskReport2: {},
      orderAmount: '', // 销售额
      orderCount: '', // 订单量
      start: dayjs('2022.10.01 00:00:00').format('YYYY-MM-DD HH:mm:ss'),
      end: dayjs('2022.10.29 23:59:59').format('YYYY-MM-DD HH:mm:ss')
    }
  },
  computed: {
    ...mapGetters(['name'])
  },
  mounted() {
    this.getNodeCollect()
    this.getAmountCollect()
    this.getRegionCollect()
    this.getSkuTop()
    this.getTaskReportInfo()
    this.getOrderCount()
    this.getOrderAmount()
  },
  methods: {
    // 合作商点位
    async getNodeCollect() {
      const AllPartners = await getAllPartnersAPI()
      this.allPartners = AllPartners.data
      // console.log(AllPartners)
      const AllCount = await getAllCountAPI()
      this.allCount = AllCount.data
      // console.log(AllCount)
      const { data: circulardata } = await getNodeCollectAPI()
      const myChart = echarts.init(document.querySelector('.box'))
      const option = {
        color: ['#85a7ff', '#99ebbd', '#ffb18b', '#c6ebff', '#dce4f2'],

        label: {
          formatter: ' {b} \n  {d}%  ',
          rich: {
            b: {
              color: 'pink',
              fontSize: 14,
              fontWeight: 'bold',
              lineHeight: 33
            }
          }
        },
        series: [
          {
            name: 'Nightingale Chart',
            type: 'pie',
            radius: [30, 100],
            center: ['50%', '50%'],
            roseType: 'radius',
            itemStyle: {
              borderRadius: 0
            },
            data: circulardata
          }
        ]
      }
      myChart.setOption(option)
    },
    // 销售额趋势图
    async getAmountCollect() {
      const { data } = await getAmountCollectAPI(
        1,
        dayjs('2022.10.24').format('YYYY-MM-DD'),
        dayjs('2022.10.29').format('YYYY-MM-DD')
      )
      console.log(data)
      const myChart = echarts.init(document.querySelector('.xssj'))
      const option = {
        title: {
          text: '销售额趋势图',
          left: 'center',
          textStyle: {
            fontSize: 14
          }
        },
        xAxis: {
          type: 'category',
          data: data.xAxis,
          boundaryGap: false
        },
        yAxis: {
          type: 'value',
          name: '单位:元'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbar: {
          trigger: 'axis'
        },
        series: [
          {
            data: data.series,
            type: 'line',
            smooth: true
          }
        ]
      }
      myChart.setOption(option)
    },
    // 销售额分布
    async getRegionCollect() {
      const { data } = await getRegionCollectAPI(
        dayjs('2022.10.24').format('YYYY-MM-DD'),
        dayjs('2022.10.29').format('YYYY-MM-DD')
      )
      console.log(data)
      const myChart = echarts.init(document.querySelector('.xsefb'))
      const option = {
        title: {
          text: '销售额分布',
          left: 'center',
          textStyle: {
            fontSize: 14
          }
        },
        xAxis: {
          data: data.xAxis,
          type: 'category'
        },
        yAxis: {
          type: 'value',
          name: '单位：元'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis'
        },
        series: [
          {
            data: data.series,
            type: 'bar',
            smooth: true,
            barWidth: 20,
            itemStyle: {
              color: '#9fc1ff',
              barBorderRadius: [5, 5, 0, 0]
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    async getSkuTop() {
      const { data } = await getSkuTopAPI(
        10,
        dayjs('2022.10.01').format('YYYY-MM-DD'),
        dayjs('2022.10.29').format('YYYY-MM-DD')
      )
      // console.log(data)
      this.skuTopList = data
    },
    // 工单统计
    async getTaskReportInfo() {
      const { data } = await getTaskReportInfoAPI(
        dayjs('2022.10.01 00:00:00').format('YYYY-MM-DD HH:mm:ss'),
        dayjs('2022.10.29 23:59:59').format('YYYY-MM-DD HH:mm:ss')
      )
      // console.log(data)
      this.taskReport1 = data[0]
      this.taskReport2 = data[1]
    },
    // 获取销售额
    async  getOrderAmount() {
      const { data } = await getOrderAmountAPI(
        dayjs('2022.10.01 00:00:00').format('YYYY-MM-DD HH:mm:ss'),
        dayjs('2022.10.29 23:59:59').format('YYYY-MM-DD HH:mm:ss')
      )
      console.log(data)
      this.orderAmount = (data / 10000).toFixed(2)
    },
    // 获取订单总量
    async getOrderCount() {
      const { data } = await getOrderCountAPI(this.start, this.end)
      console.log(data)
      this.orderCount = data
    }
  }
}
</script>

<style lang="scss" scoped>
.foot {
  display: flex;
  margin-top: 20px;
  .sbjk {

    width: 542px;
    height: 353px;
    padding: 20px;
    background-color: #fff;
    margin-left: 20px;

    .empty {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-top: 79px;
      .tips {
    margin-top: 25px;
    color: #20232a;
    font-size: 14px;
    }
    }
  }
  // 合作商Top5
  .partner {
    width: 767px;
    padding: 20px;
    background: #fff;
    border-radius: 20px;
    height: calc(40vh - 48px);
    min-height: 353px;
    display: flex;
    .box {
      width: 509px;
      height: 284px;
      // background-color: blue;
      padding: 10px;
    }
    .count {
      width: 154px;
      height: 230px;
      padding-top: 47px;
      padding-left: 38px;
      background: linear-gradient(135deg, transparent, #f8f8f9 0) 0 0,
        linear-gradient(-135deg, transparent 12px, #f8f8f9 0) 100% 0,
        linear-gradient(-45deg, transparent, #f8f8f9 0) 100% 100%,
        linear-gradient(45deg, transparent 12px, #f8f8f9 0) 0 100%;
      background-size: 50% 50%;
      background-repeat: no-repeat;
      margin-left: 32px;
      margin-top: 42px;
    }
  }
}
.text {
  position: absolute;
  width: 154px;
  height: 230px;
  padding-top: 47px;
  padding-left: 38px;
  background: linear-gradient(135deg, transparent, #f8f8f9 0) 0 0,
    linear-gradient(-135deg, transparent 12px, #f8f8f9 0) 100% 0,
    linear-gradient(-45deg, transparent, #f8f8f9 0) 100% 100%,
    linear-gradient(45deg, transparent 12px, #f8f8f9 0) 0 100%;
  background-size: 50% 50%;
  margin-left: 300px;
  right: 0;
  top: 0;
}
.top {
  display: flex;
}
// 工单统计
.allcount {
  height: 166px;
  width: 528px;
  background: #e9f3ff;
  background-image: url(),url(http://likede2-admin.itheima.net/img/task.66b715b7.png);
  background-repeat: no-repeat,no-repeat;
  background-position: 0 0, calc(100% - 12px) 100%;
  padding: 20px;

  .body {
    display: flex;
    .stats {
      flex: 1;
      // text-align: center;
      padding: 20px;
    }
    .num {
      text-shadow: 2px 4px 7px rgb(85 132 255 / 50%);
      color: #072074;
      height: 50px;
      font-size: 36px;
      font-weight: 600;
      line-height: 50px;
    }
    .text1 {
      height: 17px;
      margin-top: 3px;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #91a7dc;
      line-height: 17px;
    }
  }
}
// 销售统计
.sstj {
  height: 166px;
  width: 444px;
  // padding: 0 10px;
  background-color: #fff;
  background: #fbefe8
    url(http://likede2-admin.itheima.net/img/sale.606b0d8c.png) no-repeat
    calc(100% - 12px) 100%;
  margin-left: 20px;
  padding: 20px;
  .body {
    display: flex;
    .stats {
      flex: 1;
      // text-align: center;
      padding: 20px;
    }
    .num {
      text-shadow: 2px 4px 7px rgb(255 99 85 / 50%);
      color: #ff5757;
      height: 50px;
      font-size: 36px;
      font-weight: 600;
      line-height: 50px;
    }
    .text1 {
      height: 17px;
      margin-top: 3px;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #de9690;
      line-height: 17px;
    }
  }
}

.center {
  margin-top: 20px;
  width: 975px;
  height: 352px;
  background-color: #fff;
  padding: 20px;
}

.right {
  width: 317px;
  height: 538px;
  background-color: #fff;
  padding: 20px;
  float: right;
  margin-left: 20px;
  .body {
    margin-top: 20px;
    .el-row {
      margin-top: 25px;
      color: #333;
      font-size: 14px;
      height: 20px;
      line-height: 20px;
      .count {
        color: #737589;
        text-align: right;
      }
      .sku-name {
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .top {
        display: inline-block;
        width: 16px;
        height: 20px;
        margin-left: 10px;
        background: url();
        text-align: center;
        font-size: 12px;
        font-family: zihun143-zhengkuchaojihei, zihun143;
        font-weight: 400;
        color: #e9b499;
        line-height: 14px;
      }
    }
  }
}
.title {
  font-weight: 600;
  color: #333;
  span {
    font-size: 12px;
    font-weight: 400;
    color: #999;
    margin-left: 10px;
  }
}
.chart {
  width: 476px;
  height: 278px;
  // background-color: blue;
  padding-top: 20px;
}
</style>
